<template>
  <!-- aicc用到的自定义抽屉 -->
    <el-drawer
    :title="title"
    :visible.sync="drawer"
    direction="rtl"
    :wrapperClosable="isClosable"
    append-to-body
    :size="size"
    :before-close="handleClose">
    <el-main class="aicc-drawer-body" style="height:calc(100% - 45px);border-top:1px solid #eee;padding:20px !important">
      <slot name="aiccMain"></slot>
    </el-main>
    <el-footer style="height:40px;text-align:right;border-top:1px solid #eee;line-height:40px">
      <slot name="aiccFooter"></slot>
    </el-footer>
  </el-drawer>
</template>

<script>
export default {
  props:{
    title:{
      type:String,
      default:()=>{
        return ''
      }
    },
    size:{
      type:String,
      default:()=>{
        return '30%'
      }
    },
    isClosable:{
      type:Boolean,
      default:()=>{
        return false
      }
    }
  },
  data(){
    return {
      drawer:false
    }
  },
  methods:{
    open(){
      this.drawer = true
    },
    close(){
      this.drawer = false
    },
    handleClose(){
      this.$emit('beforeClose')
      this.drawer = false
      // console.log(111)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-drawer__header{
  margin-bottom :20px;
}
</style>


